<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Play Audio Example</title>
</head>
<body>

<button onclick="playAudio('https://dict.youdao.com/dictvoice?type=1&audio=tutorial', 3)">播放音频</button>

<!--
audio.addEventListener
基本用法
audio.addEventListener(eventType, eventHandler, useCapture);

1. eventType：要监听的事件类型（例如 "play"、"pause"、"ended" 等）。
2. eventHandler：事件触发时要执行的回调函数。
3. useCapture：一个可选的布尔值，表示是否在捕获阶段触发（默认为 false）。一般可以忽略。

常用事件类型
以下是 audio 元素常用的事件类型：
1. play：当音频播放开始时触发。
2. pause：当音频暂停时触发。
3. ended：当音频播放结束时触发。
4. timeupdate：当播放位置改变时触发，通常用于实时更新播放进度。
5. loadeddata：当音频数据加载完成并可播放时触发。
6. error：当音频播放出错时触发。
-->


<script>
    function playAudio(url, repeatCount) {
        const audio = new Audio(url);
        let playCount = 0;

        // 播放音频并监听播放结束
        audio.play().catch(error => {
            console.error("播放音频时遇到问题：", error);
        });

        // 当音频结束时重新播放
        audio.addEventListener('ended', () => {
            playCount++;
            if (playCount < repeatCount) {
                audio.currentTime = 0; // 重置播放位置
                audio.play().catch(error => {
                    console.error("播放音频时遇到问题：", error);
                });
            } else {
                console.log("播放完成");
            }
        });
    }
</script>

</body>
</html>